<template>
  <div>
    <el-dialog :visible.sync='insertBookMarkVisible' title="新建标注" width='900px'
               @closed='insertBookMarkVisible = false'>
      <el-input size="small" v-model="unmarkedKeyWords" placeholder="请输入图书名称或ISBN搜索"/>
      <el-table :data="filteredUnmarkedBookList" border stripe :height="400">
        <el-table-column label="图书名称" min-width="200" prop="name"></el-table-column>
        <el-table-column label="书号" min-width="100" prop="isbn"></el-table-column>
        <el-table-column label="更新时间" min-width="100" prop="updatedTime"></el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="insertMarkedBookList(scope.row)">加入标注</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-row>
      <el-col :span="4">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="insertBookMarkVisible = true">新建标注</el-button>
      </el-col>
      <el-col :span="10" :offset="10">
        <el-input size="small" v-model="keyWords" placeholder="请输入图书名称或ISBN搜索" @keyup.enter.native="selectMarkedBookList"/>
      </el-col>
    </el-row>
    <el-table :data="filteredBookList.slice((currentPage-1)*pageSize, currentPage*pageSize)" border stripe :height="tableHeight">
      <el-table-column label="图书名称" min-width="200" prop="name"></el-table-column>
      <el-table-column label="书号" min-width="100" prop="isbn"></el-table-column>
      <el-table-column label="知识单元提取进度" min-width="100" prop="markedRate"></el-table-column>
      <el-table-column label="更新时间" min-width="100" prop="updatedTime"></el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">
          <span><el-link type="primary" @click.prevent="extractKnowledgeUnit(scope.row.id)">提取知识单元</el-link></span>
          <span><el-link type="primary" @click.prevent="markKnowledgeUnit(scope.row.id)">知识单元标注</el-link></span>
          <span><el-link type="primary" @click.prevent="insertMaterial(scope.row)">完成</el-link></span>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        :total="filteredBookList.length"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-if="filteredBookList.length > pageSize"
        style="text-align: right;"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BookTable",
    data() {
      return {
        insertBookMarkVisible: false,
        unmarkedBookList: [],
        bookList: [],
        tableHeight: CONST.WORKSPACE_HEIGHT - 80,
        unmarkedKeyWords: '',
        keyWords: '',
        pageSize: 10,
        currentPage: 1,
      }
    },
    computed: {
      filteredUnmarkedBookList(){
        return this.unmarkedBookList.filter(item => item.name.search(this.unmarkedKeyWords) !== -1 || item.isbn.search(this.unmarkedKeyWords) !== -1)
      },
      filteredBookList(){
        return this.bookList.filter(item => item.name.search(this.keyWords) !== -1 || item.isbn.search(this.keyWords) !== -1)
      }
    },
    methods: {
      insertMaterial(book){
        this.$confirm('您确定要结束该图书的标注,将已经拆分出的内容推送到素材库?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post('/pmph/action/book/insertMaterial', book)
            .then(() => {
              this.$message.success("操作成功")
              this.selectMarkedBookList()
            })
        })
      },
      insertMarkedBookList(book){
        this.axios.post('/pmph/action/mark/insertMarkedBookList', book)
          .then(() => {
            this.selectMarkedBookList()
            this.selectUnMarkedBookList()
        })
      },
      selectMarkedBookList(){
        this.axios.get('/pmph/action/mark/selectMarkedBookList', {
          params: {
            keyWords: this.keyWords,
            currentPage: this.currentPage,
            pageNum: this.pageSize
          }
        }).then((response) => {
          this.bookList = response.data;
        })
      },
      selectUnMarkedBookList(){
        this.axios.get('/pmph/action/mark/selectUnMarkedBookList')
          .then((response) => {
            this.unmarkedBookList = response.data;
        })
      },
      //分页
      extractKnowledgeUnit(bookId){
        this.$router.push({
            path: '/mark/extractKnowledgeUnit',
            query: {
              bookId,
            }
          })
      },
      async markKnowledgeUnit(bookId){
        await this.axios.get('/pmph/action/knowledgeUnit/selectList', {
          params: {bookId}
        }).then(response => {
          this.$store.commit('setKnowledgeUnitList', response.data)
        })
        this.$router.push({
          path: '/mark/markKnowledgeUnit',
          query: {
            bookId,
          }
        })
      },
    },
    created() {
      this.selectMarkedBookList()
      this.selectUnMarkedBookList()
    }
  }
</script>

<style scoped>

</style>
